import { getAtMeetingPeriodByPage } from '@/services/meeting/atMouthlyMeeting';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormDateRangePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { Button, DatePicker, Form, Input, List, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './atMeetingDetail.less';
const Search = Input.Search;
const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
const data = [
  { id: 1, title: 'Ant design Title 1' },
  { id: 2, title: 'Ant design Title 2' },
  { id: 3, title: 'Ant design Title 3' },
  { id: 4, title: 'Ant design Title 4' },
  { id: 5, title: 'Ant design Title 4' },
  { id: 6, title: 'Ant design Title 4' },
  { id: 7, title: 'Ant design Title 4' },
  { id: 8, title: 'Ant design Title 4' },
  { id: 9, title: 'Ant design Title 4' },
  { id: 10, title: 'Ant design Title 4' },
  { id: 11, title: 'Ant design Title 4' },
  { id: 12, title: 'Ant design Title 4' },
];

const columns = [
  {
    title: 'businessTrip',
    dataIndex: 'businessTrip',
    filters: [
      {
        text: '姓李的',
        value: '李',
      },
      {
        text: '姓胡的',
        value: '胡',
      },
      {
        text: '子菜单',
        value: '子菜单',
        children: [
          {
            text: '姓陈的',
            value: '陈',
          },
          {
            text: '姓王的',
            value: '王',
          },
        ],
      },
    ],
    // 指定确定筛选的条件函数
    // 这里是名字中第一个字是 value
    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: 'workingCategory',
    dataIndex: 'workingCategory',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'afterSales',
    dataIndex: 'afterSales',
    filters: [
      {
        text: '南湖',
        value: '南湖',
      },
      {
        text: '西湖',
        value: '西湖',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
  },
  {
    title: 'branchOrOneBc',
    dataIndex: 'branchOrOneBc',
  },
  {
    title: 'branchOrOneBcOther',
    dataIndex: 'branchOrOneBcOther',
  },
  {
    title: 'buSu',
    dataIndex: 'buSu',
  },
  {
    title: 'buSuOthers',
    dataIndex: 'buSuOthers',
  },
  {
    title: 'machineName',
    dataIndex: 'machineName',
  },
  {
    title: 'controller',
    dataIndex: 'controller',
  },
  {
    title: 'drives',
    dataIndex: 'drives',
  },
  {
    title: 'motor',
    dataIndex: 'motor',
  },
  {
    title: 'WorkingDetails',
    dataIndex: 'WorkingDetails',
  },
  {
    title: 'nextStep',
    dataIndex: 'nextStep',
  },
  {
    title: 'status',
    dataIndex: 'status',
  },
  {
    title: 'applicant',
    dataIndex: 'applicant',
  },
];

const data2 = [
  {
    key: '1',
    name: '胡斌',
    age: 32,
    address: '南湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园12号',
  },
  {
    key: '3',
    name: '李大嘴',
    age: 32,
    address: '南湖区湖底公园123号',
  },
  {
    key: '4',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '5',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '6',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '7',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '8',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '9',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '10',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '11',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '12',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '13',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
];
function onChange(pagination, filters, sorter) {
  // 点击分页、筛选、排序时触发
  console.log('各类参数是', pagination, filters, sorter);
}

const atMeetingDetail: React.FC<{}> = (props) => {
  const [isBackgroundColorSwitched, setIsBackgroundColorSwitched] = useState(false);
  const toggleBackgroundColor = () => {
    setIsBackgroundColorSwitched(!isBackgroundColorSwitched);
  };

  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const [row, setRow] = useState({});
  const [rows, setRows] = useState([]);
  const [form] = Form.useForm();

  const [grid, setGrid] = useState(true);
  const [mainVisit, setMainVisit] = useState(false);
  const [mainTitle, setMainTitle] = useState('新建');

  const handleSubmit = (values) => {
    let result = getAtMeetingPeriodByPage({
      current: 1,
      pageSize: 20,
      ...values,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  };

  const mainSubmit = () => {};

  useEffect(() => {
    let result = getAtMeetingPeriodByPage({
      current: 1,
      pageSize: 20,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  }, []);

  return (
    <div className={styles.father}>
      <div className={styles.top}>
        <div className={styles.top1}>
          <QueryFilter preserve={false} span={8} onFinish={handleSubmit}>
            <ProFormText name="meetingName" label="会议名称" />
            <ProFormDateRangePicker name="startDate" label="响应日期" />
            <ProFormDateRangePicker name="endDate" label="创建时间" />
          </QueryFilter>
        </div>
        <div className={styles.top2}>
          <List
            size="small"
            // header={<div>Header</div>}
            // footer={<div>Footer</div>}
            bordered
            dataSource={rows}
            renderItem={(item) => (
              <List.Item
                onClick={() => {
                  setRow(item);
                }}
                style={{ background: item.id === row.id ? '#999' : '' }}
              >
                <span>{item.meetingName}</span> {item.startDate} to {item.endDate}
              </List.Item>
              // <div
              //   style={{ backgroundColor: isBackgroundColorSwitched ? 'lightblue' : 'white' }}
              //   onClick={toggleBackgroundColor}
              // >
              //   {item}
              // </div>
            )}
          />
        </div>
      </div>
      <div className={styles.bottom}>
        <div className={styles.bottomLeft}>
          <div>
            <Search placeholder="input search text" onSearch={() => {}} />
          </div>
          <div className={styles.top2}>
            <List
              size="small"
              // header={<div>Header</div>}
              // footer={<div>Footer</div>}
              bordered
              dataSource={data}
              renderItem={(item) => (
                <List.Item
                  onClick={() => {
                    setRow(item);
                  }}
                  style={{ background: item.id === row.id ? '#999' : '' }}
                >
                  {item.title}
                </List.Item>
                // <div
                //   style={{ backgroundColor: isBackgroundColorSwitched ? 'lightblue' : 'white' }}
                //   onClick={toggleBackgroundColor}
                // >
                //   {item}
                // </div>
              )}
            />
          </div>
        </div>
        <div className={styles.bottomRight}>
          <div style={{ marginBottom: 16 }}>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                setMainVisit(true);
                setMainTitle('新建');
              }}
            >
              增加月度记录
            </Button>
          </div>
          <Table size="small" columns={columns} dataSource={data2} onChange={onChange} />
        </div>
      </div>

      <ModalForm
        visible={mainVisit}
        title={mainTitle}
        form={form}
        onFinish={mainSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setMainVisit(false);
          },
        }}
        layout={formLayoutType}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="businessTrip"
          label="BusinessTrip"
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: '请输入编码' }]}
        />
        <ProFormText name="workingCategory" label="WorkingCategory" colProps={{ md: 12, xl: 12 }} />
        <ProFormText name="afterSales" label="afterSales" colProps={{ md: 12, xl: 12 }} />

        <ProFormText name="branchOrOneBc" label="BranchOrOneBc" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="branchOrOneBcOther"
          label="BranchOrOneBcOther"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText name="buSu" label="BuSu" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="buSuOthers" label="BuSuOthers" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="machineName" label="MachineName" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="controller" label="Controller" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="drives" label="Drives" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="motor" label="Motor" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="workingDetails" label="WorkingDetails" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="nextStep" label="NextStep" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="status" label="Status" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="applicant" label="Applicant" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="departureDate" label="DepartureDate" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="returnDate" label="ReturnDate" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="workingHours" label="WorkingHours" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="projectReportOneDriveLink"
          label="ProjectReportOneDriveLink"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText
          name="projectReportStatus"
          label="ProjectReportStatus"
          colProps={{ md: 12, xl: 8 }}
        />
      </ModalForm>
    </div>
  );
};

export default atMeetingDetail;
